<template>
  <div class="app-container">
    <div class="handle-box" style="padding-bottom: 10px;">
      <el-button type="primary" class="handle-del mr10">
        <router-link :to="'/aliyun_ecs/create_ecs'">
          创建ECS
        </router-link>
      </el-button>

    </div>
    <div style="padding-top: 5px;padding-bottom: 5px;">所有机器密码：Hadoop123456</div>
    <el-table
      ref="multipleTable"
      :data="tableData"
      border
      class="table"
      header-cell-class-name="table-header"
    >
      <el-table-column prop="instance_name" label="实例名称" width="100" />
      <el-table-column label="实例ID" width="210">
        <template slot-scope="{row}">
          <router-link :to="'/aliyun_ecs/ecs_app/'+row.instance_id" class="link-type">
            <span>{{ row.instance_id }}</span>
          </router-link>
        </template>
      </el-table-column>
      <el-table-column prop="ip" label="IP" width="140" />
      <el-table-column prop="region_id" label="区域ID" width="150" />
      <el-table-column prop="image_id" label="镜像ID" />
      <el-table-column prop="task_remark" label="任务进度" />

      <el-table-column label="操作" width="200">
          <template slot-scope="{row}">
            <el-button type="primary" size="small" @click="deleteEcs(row.id,row.instance_id)">删除</el-button>
          </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import axios from 'axios'

export default {
  name: 'EcsList',
  data() {
    return {
      tableData: [],
      intervalId: null
    }
  },
  computed: {

  },
  created() {
    this.ecsList()
    this.dataRefreh()
  },
  methods: {
    ecsList() {
      axios.get('/aliyunEcs/ecsList', {
        params: {
          page: 1,
          pageSize: 1000
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.tableData = response.data.data
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    installHadoop() {
      axios.get('/aliyunEcs/install_hadoop')
        .then((response) => {
          if (response.data.code == 0) {
            this.ecsList()
          } else {
            this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    createEcs() {
      axios.get('/aliyunEcs/createEcs')
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: 'ECS创建任务提交成功，请等待2~3分钟',
              type: 'success'
            })
            this.ecsList()
          } else {
            this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    deleteEcs(id,instance_id){
      axios.get('/aliyunEcs/deleteInstance',{
        params:{
          id:id,
          instance_id:instance_id,
        }
      })
        .then((response) => {
          if (response.data.code == 0) {
            this.$message({
              message: '删除成功',
              type: 'success'
            })
            this.ecsList()
          } else {
            this.$message({
              message: response.data.message,
              type: 'error'
            })
          }
        })
        .catch(function(error) {
          console.log(error)
        })
    },
    // 定时刷新数据函数
    dataRefreh() {
      // 计时器正在进行中，退出函数
      if (this.intervalId != null) {
        return
      }
      // 计时器为空，操作
      this.intervalId = setInterval(() => {
        this.ecsList() // 加载数据函数
      }, 3000)
    },
    // 停止定时器
    clear() {
      clearInterval(this.intervalId) // 清除计时器
      this.intervalId = null // 设置为null
    }
  }
}
</script>
